<template>
    <div>
      <div class="selectbox">
        <span>已选择</span><span class="selectnum">{{ num }}</span
        ><span>项</span> <span @click="clearmultipleSelection()" class="clearselect">清空</span>
      </div>
      <el-table
        :data="tableData"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        ref="multipleTable"
        tooltip-effect="dark"
        
      >
        <el-table-column type="selection" width="55" v-if="isSelection"> </el-table-column>
        <el-table-column type="index" width="55" v-if="isNum"> </el-table-column>
        <el-table-column
          v-for="(item, index) in headerData"
          :key="index"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          header-align="center"
          align="center"
          :sortable="item.sortable"
          show-overflow-tooltip
          
          
        >
          <template slot-scope="scope">
            <div v-if="item.slot">
              <slot :name="item.prop" v-bind:row="scope.row"></slot>
            </div>
            <div v-if="!item.slot"   class="textobe">
              {{ tableData[scope.$index][item.prop] }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
  
          label="操作"
          :width="160"
          header-align="center"
          align="center"
        >
          <template slot-scope="scope">
            <slot name="operationBtn" v-bind:operationData="scope.row"></slot>
          </template>
        </el-table-column>
      </el-table>
  
      <el-pagination
        v-if="paginationStyle"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentpage"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        class="paging"
      >
      </el-pagination>
    </div>
  </template>
  
  <script>
  export default {
    name: "tableList",
    data() {
      return {};
    },

    methods: {
      handleSelectionChange(val) {
        let _self = this;
        // this.multipleSelection = val;
        // console.log(_self.$refs.multipleTable);
        _self.$emit("SelectionChange", val);
      },
      handleSizeChange(val) {
        let _self = this;
        _self.$emit("SizeChange", val);
      },
      handleCurrentChange(val) {
        let _self = this;
        _self.$emit("CurrentChange", val);
      },
      clearmultipleSelection() {
        let _self = this;
        _self.$refs.multipleTable.clearSelection();
        // _self.$emit("clearmultipleSelection", val);
      },
    },
  
    props: {
      dialog: {
        type: Boolean,
        default: () => {
          return false;
        },
      },
      num: {
        type: Number,
        default: () => {
          return 0;
        },
      },
      // 是否显示分页
      paginationStyle: {
        type: Boolean,
        default: () => {
          return true;
        },
      },
      // 选中列表
      multipleSelection: {
        type: Array,
        default: () => {
          return [];
        },
      },
      //表格列表传递过来的数据
      tableData: {
        type: Array,
        default: () => {
          return [];
        },
      },
      // 表头数据
      headerData: {
        type: Array,
        default: () => {
          return [];
        },
      },
      // 当前第几页
      currentpage: {
        type: Number,
        default: () => {
          return 1;
        },
      },
      // 一页多少条
      pagesize: {
        type: Number,
        default: () => {
          return 10;
        },
      },
      //总条数
      total: {
        type: Number,
        default: () => {
          return 0;
        },
      },
      // 左侧选框
      isSelection:{
        type:Boolean,
        default:()=>{
          return true;
        }
      },
      // 左侧排序
      isNum:{
        type:Boolean,
        default:()=>{
          return false;
        }
      }
    },
  };
  </script>
  
  <style>
  .paging {
    margin-top: 10px;
    text-align: right;
  }
  .selectbox {
    height: 40px;
    line-height: 40px;
    margin-top: -10px;
    margin-bottom: 15px;
    background-color: #e6f7ff;
    padding-left: 30px;
    font-size: 14px;
  }
  .selectnum{
    color: #18ACFF;
    margin-left: 5px;
    margin-right: 5px;
  }
  .clearselect{
    margin-left: 30px;
    color: #18ACFF;
    cursor: pointer;
  }
  .el-table td.el-table__cell .textobe{
    /* white-space: nowrap; */
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }
  .el-tooltip__popper{
    width: 400px;
  }
  </style>